<template>
  <el-dialog
    :close-on-click-modal="false"
    v-model="open"
    append-to-body
    title="项目调价"
    width="1000px"
    @close="cancel"
  >
    <el-row :gutter="24">
      <el-col :span="12">
        <el-card class="box-card">
          <template #header>
            <div class="clearfix">
              <span>现行价格</span>
            </div>
          </template>
          <div class="text item">
            <div>项目编码：{{ newPriceInfo.itemCode }}</div>
            <div>项目名称：{{ newPriceInfo.itemName }}</div>
            <div>项目规格：{{ newPriceInfo.itemSpec }}</div>
            <div>
              项目单位：
              <template v-for="(item, index) in dictDataMap['spec_unit']"
                ><span v-if="item.value === newPriceInfo.units">{{
                  item.label
                }}</span></template
              >
            </div>
            <div>项目价格：{{ newPriceInfo.price }} 元</div>
            <div>启用时间：{{ newPriceInfo.startDate }}</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card class="box-card">
          <template #header>
            <div class="clearfix">
              <span>调价价格</span>
            </div>
          </template>
          <div>
            <el-form ref="formRef" :model="form" :rules="rules" label-width="130px">
              <el-row :gutter="40">
                <el-col :span="24">
                  <el-form-item label="最新价格" prop="price">
                    <el-input
                      v-model="form.price"
                      placeholder="请输入最新价格"
                      type="number"
                    >
                      <template #append>元</template>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="最新启用时间" prop="startDate" style="width: 100%">
                    <el-date-picker
                      v-model="form.startDate"
                      :disabled-date="disabledDateFunc"
                      clearable
                      placeholder="请选择开始时间"
                      type="datetime"
                      value-format="YYYY-MM-DD HH:mm:ss"
                    >
                    </el-date-picker>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <template #footer>
      <span class="dialog-footer">
        <el-button :loading="buttonLoading" type="primary" @click="submitForm"
          >确 定</el-button
        >
        <el-button @click="cancel">取 消</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import {priceAdjustment} from "@/api/base/priceList";
import {useDictStoreHook} from "@/store/modules/dict";

const { proxy } = getCurrentInstance() as any;
const formRef = ref();
const emits = defineEmits(["refreshParentList"]);
const dictStore = useDictStoreHook();
const dictDataMap = ref(dictStore.isTypeGetData("spec_unit"));
const open = ref(false);
// 查询最新的价格
const newPriceInfo = ref<any>({});
// 确定按钮loading状态
const buttonLoading = ref(false);
const form = ref<PriceList>({
  startDate: new Date(),
  networkPrice: 0,
  tradePrice: 0,
  price: 0,
  preferPrice: 0,
});
const disabledHoursFn = (time) => {
  let disabledHours = [];
  // 获取当前时间
  let data = new Date();
  // 如果选择的时间为当前时间的日期，则需要限制小时数，否则不需要限制小时数
  let flag =
    time.getFullYear() == data.getFullYear() &&
    time.getMonth() == data.getMonth() &&
    time.getDay() == data.getDay();
  if (flag) {
    // @ts-ignore
    disabledHours = range(data.getHours(), 24);
  }
  return disabledHours;
};

const disabledDateFunc = (time) => {
  return time.getTime() < Date.now();
};

const rules = ref({
  price: [{ required: true, message: "最新价格不能为空", trigger: "blur" }],
  startDate: [{ required: true, message: "开始时间不能为空", trigger: "blur" }],
});

// 取消按钮
function cancel() {
  open.value = false;
  // this.reset();
}
// 打开弹出框
function priceAdjustmentShow(row) {
  newPriceInfo.value = row;
  open.value = true;
}
/** 提交 */
function submitForm() {
  (formRef.value as any).validate((valid) => {
    if (valid) {
      if (Number(newPriceInfo.value.price) == Number(form.value.price)) {
        return ElMessage.error("调整的价格与原价相同，不能调价");
      }
      form.value.priceId = newPriceInfo.value.priceId;
      priceAdjustment(form.value).then((_res) => {
        ElMessage.success("调价成功");
        emits("refreshParentList");
      });
    }
  });
}
defineExpose({
  priceAdjustmentShow,
});
</script>

<script lang="ts">
export default {
  name: "priceAdjustment",
};
</script>

<style scoped>
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}

.box-card {
  width: 480px;
}
</style>
